<html lang="zh">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style-type: none;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YXB</title>
</head>



<body>
<h3>打开 console.log()  </h3>
<pre>
    首先本质区别是：

    event.target返回触发事件的元素对象
    event.currentTarget返回绑定事件的元素对象
</pre>

<ul id="ul">ul
    <li>li<a href="">a</a></li>
    <li>li<a href="">b</a></li>
    <li>li<a href="">c</a></li>
</ul>
</body>
<script>


        document.getElementById("ul").onclick = function(event){


        console.log("============下面是  event.target :    ");
        console.log(event.target);

        console.log("============下面是  event.target.innerText :    ");
        console.log(event.target.innerText);

        console.log("============下面是  event.currentTarget   ");
        console.log(event.currentTarget);

        console.log("============下面是  event.currentTarget.innerText   ");
        console.log(event.currentTarget.innerText);

        console.log("============下面是   event.currentTarget.innerHTML   ");
        console.log(event.currentTarget.innerHTML);


        // js中的preventDefault()
        // 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)，比如阻止表单提交，阻止链接跳转
        event.preventDefault();
    };
</script>



</html>